<template>
  <div v-if="goodsList.length" class="shangpinzhuanlan">
    <div class="box">
      <div class="srcoll-feature">
        <div class="featurelist">
          <div
            v-for="(item, index) in module.modules"
            :key="item.id"
            :style="{ 'margin-left': index == 0 ? '10.5px' : '16px' }"
            class="feature-item"
            @click="selectIndex(index)"
          >
            <div
              class="title"
              :class="index === activeIndex ? 'titleActive' : 'title'"
            >
              {{ item.title }}
            </div>
            <div class="titlep">{{ item.subTitle }}</div>
            <div
              :class="index === activeIndex ? 'point' : ' '"
              :style="{
                width: item.width,
                background: index === activeIndex ? '#FFB72F' : '',
              }"
            />
          </div>
        </div>
      </div>
      <div class="waterfallflow-main flex-x-between" style="min-height: 250px">
        <div v-if="goodsList.length" id="left" class="leftview">
          <div
            v-for="item in goodsList"
            :key="item.productId"
          >
            <div class="waterfallflow-goods-item">
              <img
                :src="fileBaseUrl + item.coverImg"
                style="width: 111px;object-fit: cover;"
                class="waterfall-image"
              >
              <div class="title app-space-ell-2">{{ item.title }}</div>
              <div class="price">
                <span class="newprcie">￥小程序查看</span>
              </div>
            </div>
          </div>
        </div>
        <div v-if="goodsList[activeIndex][type === 'MALL' ? 'goodsList' : 'itemList']" id="right" class="rightview">
          <div
            v-for="(item, index) in goodsList[activeIndex][type === 'MALL' ? 'goodsList' : 'itemList']"
            :key="item.goodsId"
          >

            <div
              v-if="index%2!=0"
              class="waterfallflow-goods-item"
            >
              <img
                :src="fileBaseUrl + item.coverImg"
                width="344rpx"
                style="width: 170px"
                class="waterfall-image"
              >
              <div class="title app-space-ell-2">{{ item.title }}</div>
              <div class="price">
                <span class="newprcie">￥小程序查看</span>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
  <ModuleNotConfig v-else :module="module" />
</template>

<script>
import { getShelfList, getOrderShelfList } from '@/views/wxaMallModule/api/shelf'
import { getPlanShelfList } from '@/api/reservation'
export default {
  props: {
    module: {
      type: Object
    },
    fileBaseUrl: {
      type: String
    }
  },
  data() {
    return {
      activeIndex: 0,
      featureList: null,
      // 商品总数组
      images: null,
      // 当前需要加载的数量
      loadingCount: null,
      loading: true,
      noData: false,
      goodsList: [],
      type: 'MALL'
    }
  },
  watch: {
    module: {
      handler() {
        this.getFetachData()
      },
      deep: true,
      immediate: true
    },
    goodsList(v) {
      console.log('goodsList', v)
    },
    activeIndex(v) {
      console.log('activeIndex', v)
    }

  },
  mounted() {
    console.log(this.module)
    this.activeIndex = 0
    this.goodsList = []
    this.handleFeatureList()
    this.getFetachData()
  },
  methods: {
    getFetachData() {
      const modules = this.module.modules
      if (!modules || !modules.length) return
      const { businessType, biz } = this.module
      this.type = businessType || 'MALL'
      console.log('>>>>>', this.type, this.module)
      const ids = modules.map((item) => item.biz.params.shelfId)
      if (ids.length && businessType === 'MALL' || !businessType) {
        if (biz.type === 'RESERVATION_SHELF') {
          this.getPlanShelfList(ids)
        } else {
          this.getShelfList(ids)
        }
      } else if (ids.length && businessType === 'ORDER') {
        this.getOrderShelfList(ids)
      }
    },
    selectIndex(index) {
      if (this.activeIndex === index) return
      this.activeIndex = index
    },
    // feature宽度适配
    handleFeatureList() {
      const featureList = this.module.modules
      featureList?.forEach((item) => {
        if (item.title) {
          const len = item.title.length
          if (len == 4) {
            item.width = '75px'
          } else if (len == 3) {
            item.width = '50px'
          } else if (len == 2) {
            item.width = '42.5px'
          } else {
            item.width = '50px'
          }
        }
      })
    },
    getShelfList(ids) {
      getShelfList(ids).then((res) => {
        this.goodsList = res.data
      })
    },
    getPlanShelfList(ids) {
      getPlanShelfList(ids).then(
        (res) => {
          console.log('结果1111', res)
          this.goodsList = res.data[0].planList.splice(0, 6)
        }
      )
    },
    getOrderShelfList(ids) {
      getOrderShelfList(ids).then(res => {
        this.goodsList = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.srcoll-feature {
  background-color: #f6f6f6;
  padding-right: 26rpx;
  box-sizing: border-box;
}

.featurelist {
  display: flex;
  flex-wrap: nowrap;
  padding: 16px 0px;
  width: 100%;
  align-items: center;
}

.featurelist .feature-item {
  flex-shrink: 0;
  font-family: PingFang SC;
  font-weight: 400;
  color: #353535;
  text-align: center;
  margin: 0 16px;
  position: relative;
}

.featurelist .feature-item .title {
  font-size: 14px;
  z-index: 5;
  font-family: PingFang SC;
  position: relative;
  padding: 0px 5px;
}

.featurelist .feature-item .titleActive {
  font-size: 17px;
  font-weight: bold;
}

.featurelist .feature-item .titlep {
  font-size: 12px;
  color: #888888;
  margin-top: 6.5px;
}

.featurelist .feature-item .point {
  // opacity: 0.5;
  width: 42.5px;
  height: 8px;
  position: absolute;
  left: 50%;
  top: 32%;
  transform: translateX(-50%);
  z-index: 1;
  border-bottom-right-radius: 5px;
  border-top-left-radius: 5px;
}

.waterfallflow-main {
  margin-top: 6px;
}

#left{
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.waterfallflow-main .leftview {
  margin-right: 1%;
}

.waterfallflow-main .rightview {
  margin-left: 1%;
}

.waterfallflow-main .leftview .waterfallflow-goods-item,
.waterfallflow-main .rightview .waterfallflow-goods-item {
  width: 111px;
  // text-align: center;
  // box-shadow: 0px 2px 4.5px 0px rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  margin: 10.5px 0;
  overflow: hidden;
  padding-bottom: 12px;
}

.waterfallflow-main .waterfall-image {
  width: 111px;
  height: 134px;
  max-height: 265px;
}

.waterfallflow-main .waterfall-image {
  border-radius: 10px;
}

.waterfallflow-main .title {
  font-size: 13.5px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #000000;
  margin: 6.5px 0 7.5px 0;
}

.waterfallflow-main .price {
  font-family: Source Han Sans SC;
}

.waterfallflow-main .price .newprcie {
  font-size: 16px;
  font-family: Source Han Sans SC;
  font-weight: bold;
  color: #e64340;
}

.waterfallflow-main .price .oldprcie {
  font-size: 13.5px;
  font-weight: 400;
  text-decoration: line-through;
  color: #888888;
  margin-left: 9.5px;
}

.nomore {
  width: 100%;
  height: 25px;
  font-size: 13.5px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #b2b2b2;
  line-height: 18.5px;
  text-align: center;
  margin-top: 12.5px;
  margin-bottom: 15px;
}
</style>
